import { useState,useEffect } from 'react'
import './App.css'
import HelloComponent  from './hello'
import NameEditComponent from './nameEdit'

function App() {
const [name,setName]=useState("defaultUserName")
const [editingName,setEditingName]=useState('defaultUserName')
// const setUsernameState=
// (e:React.ChangeEvent<HTMLInputElement>)=>{
//   setName(e.target.value)
// }
useEffect(()=>{
  loadUsername()
},[])

const loadUsername=()=>{
  setTimeout(()=>{
    setName('name from async call')
     setEditingName('name from async call')
  },500)
}

const setUsernameState=()=>{
  setName(editingName)
}

  return (
    <div className="App">
    <HelloComponent userName={name} age={18}/>
    <NameEditComponent 
    initialUserName={name} 
    editingName={editingName} 
    onEditingNameUpdated={setEditingName} 
    onNameUpdated={setUsernameState}
    disabled={editingName == name || editingName==''}/>
    </div>
  )
}

export default App
